<template>
	<div class="admin_index">
		<div class="menu">
			<div class="menu-item" :class="currentMenu == item && 'active'" v-for="(item, index) in menus" @click="menuHandel(item)">{{item}}</div>
		</div>
		<div class="content">
			<!--这里改成菜单名字绑定，因为需要做其他页面跳转过来，通过query参数传递组件名字直接默认显示对应组件 -->
			<UserManage v-if="currentMenu === '用户管理'"/>
			<YOLOManage v-if="currentMenu === 'YOLO管理'"/>
			<ImageHistoryManage v-if="currentMenu === '图片识别管理'"/>
			<NewsManage v-if="currentMenu === '新闻管理'"/>
			<ForumManage v-if="currentMenu === '论坛管理'"/>
			<HomeManage v-if="currentMenu === '主页管理'"/>
			<ChatManagement v-if="currentMenu === '聊天管理'"/>
			<EncyclopediaManage v-if="currentMenu === '百科管理'"/>
			<VideoHistory v-if="currentMenu === '视频识别历史'"/>
		</div>
	</div>
</template>

<script setup>
import {ref} from 'vue'
import UserManage from './admin_component/UserManage.vue'
import YOLOManage from "./admin_component/YOLOManage.vue";
import ImageHistoryManage from "./admin_component/ImageHistoryManage.vue";
import NewsManage from "./admin_component/NewsManage.vue";
import ForumManage from "./admin_component/ForumManage.vue";
import HomeManage from './admin_component/HomeManage.vue';
import ChatManagement from './admin_component/ChatManagement.vue';
import EncyclopediaManage from './admin_component/EncyclopediaManage.vue';
import VideoHistory from './admin_component/VideoHistory.vue'

import {useRoute} from 'vue-router'
const route = useRoute()

const menus = ref(['用户管理', 'YOLO管理', '视频识别历史', '图片识别管理', '新闻管理', '论坛管理', '主页管理', '聊天管理', '百科管理'])
//当前选中显示的menus组件
const currentMenu = ref('用户管理')
const menuHandel = item => {
	currentMenu.value = item
}

const init = ()=> {
	currentMenu.value = route.query.component ? route.query.component : '用户管理'
}
init()
</script>

<style scoped lang="scss">
.admin_index {
	display: flex;
	width: 100vw;
	height: calc(100vh - 60px);

	.menu {
		width: 220px;
		height: 100%;
		overflow-y: scroll;
		border-right: 1px solid rgb(177.3, 179.4, 183.6);
		/* 隐藏 WebKit 浏览器的滚动条 */
		&::-webkit-scrollbar {
			display: none;
		}
		/* 隐藏 Firefox 浏览器的滚动条 */
		scrollbar-width: none;
		.menu-item{
			height: 60px;
			width: 100%;
			padding: 0 8px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 16px;
			color: #303133;
			font-weight: 600;
			cursor: pointer;
			&:hover{
				background: rgb(159.5, 206.5, 255, 0.4);
			}
		}
		.active{
			background: rgb(159.5, 206.5, 255, 0.4)
		}
	}

	.content {
		flex: 1;
		height: 100%;
		overflow-y: scroll;
	}
}
</style>
